<template>
  <div class="dashboard-container">
    <h1>仪表盘</h1>
    <div class="dashboard-content">
      <div class="welcome-card">
        <h2>欢迎使用RBAC权限管理系统</h2>
        <p>这是一个基于角色的访问控制系统，您可以在这里管理用户、角色和权限。</p>
      </div>
      
      <div class="stats-container">
        <div class="stat-card">
          <h3>用户</h3>
          <div class="stat-value">{{ userCount }}</div>
        </div>
        <div class="stat-card">
          <h3>角色</h3>
          <div class="stat-value">{{ roleCount }}</div>
        </div>
        <div class="stat-card">
          <h3>权限</h3>
          <div class="stat-value">{{ permissionCount }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';

// 模拟数据，实际应用中应该从API获取
const userCount = ref(12);
const roleCount = ref(5);
const permissionCount = ref(25);
</script>

<style scoped>
.dashboard-container {
  padding: 20px;
}

.dashboard-content {
  margin-top: 20px;
}

.welcome-card {
  background-color: #fff;
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 20px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

.stats-container {
  display: flex;
  gap: 20px;
  margin-top: 20px;
}

.stat-card {
  flex: 1;
  background-color: #fff;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  text-align: center;
}

.stat-value {
  font-size: 36px;
  font-weight: bold;
  color: #409eff;
  margin-top: 10px;
}
</style>